<template>
	<div>
		<!-- <a-modal title="西药" :width="500" :visible="visible" @ok="submit" @cancel="cancelAdd">
      <a-form :form="form">
        <a-form-item label="西药">
          {{selmedicine.name}}
          <a-button v-decorator="['medicineid',{ rules: [{ required: true, message: '请输选择西药' }] }]" type="primary"
            @click="chooseMedicine">选择</a-button>
        </a-form-item>
        <a-form-item label="库存">
          <a-input v-decorator="['inventory',{ rules: [{ required: true, message: '请输入库存' }] }]" placeholder="" />
        </a-form-item>
        <a-form-item label="供货价">
          <a-input v-decorator="['supplyprice',{ rules: [{ required: true, message: '请输入供货价' }] }]" placeholder="" />
        </a-form-item>
      </a-form>
    </a-modal> -->
		<a-modal title="选择西药" :width="1000" :visible="visible" @ok="submit" @cancel="cancelAdd">
			<div class="table-page-search-wrapper">
				<a-form layout="inline">
					<a-row :gutter="48">
						<a-col :md="6" :sm="24">
							<a-form-item label="名称">
								<a-input allow-clear placeholder="请输入名称" v-model="queryParam.name" />
							</a-form-item>
						</a-col>
						<a-col :md="6" :sm="24">
							<a-form-item label="分类">
								<a-select v-model="queryParam.drugtypeid" placeholder="请选择分类"
									:default-active-first-option="false">
									<a-select-option v-for="(item, index) in typeList" :key="item.id" :value="item.id">
										{{ item.name }}
									</a-select-option>
								</a-select>
							</a-form-item>
						</a-col>
						<a-col :md="12" :sm="24">
							<a-button type="primary" @click="handleSearch">查询</a-button>
							<a-button style="margin-left: 8px" @click="resetSearch">重置</a-button>
						</a-col>
					</a-row>
				</a-form>
			</div>
			<a-table size='small' :scroll="{ x: true }" ref="table" @change="tablePaginationChange"
				:pagination="pagination" bordered :dataSource="dataSource" :columns="columns"
				:rowKey="(record,index)=> index">
				<div slot-scope="text, record" slot="image" style="display: flex;flex-wrap:wrap;">
					<img @click="previewImg(item)" v-for="(item,index) in record.image.split(',')" :key='index'
						class="banner-img" style="margin: 10px;" :src="item" />
				</div>
				<!-- 供货价 -->
				<div slot="supplyprice" slot-scope="text, record" href="javascript:;">
					<a-button size='small' type="link" @click="chooseInfo(record)">
						保存
					</a-button>
				</div>
				<!-- 库存 -->
				<div slot="inventory" slot-scope="text, record" href="javascript:;">
					<a-button size='small' type="link" @click="chooseInfo(record)">
						保存
					</a-button>
				</div>
				<div slot="action" slot-scope="text, record" href="javascript:;">
					<a-button size='small' type="link" @click="chooseInfo(record)">
						保存
					</a-button>
				</div>
			</a-table>
		</a-modal>
		<imgBox ref='preimg'></imgBox>
	</div>
</template>

<script>
	import {
		medicineType,
		medicineWesAdd,
		medicineWesUpdate,
		medicineWesAll
	} from '@/api/medicine'
	import imgBox from '@/components/previewImg/index'
	import {
		getFormData
	} from '@/utils/aliOss/aliossUpload.js'
	import aliOssConfig from '@/utils/aliOss/config'


	const formItemLayout = {
		labelCol: {
			span: 4
		},
		wrapperCol: {
			span: 8
		},
	};
	const formTailLayout = {
		labelCol: {
			span: 4
		},
		wrapperCol: {
			span: 8,
			offset: 4
		},
	};

	export default {
		components: {
			imgBox
		},
		props: {
			visible: {
				type: Boolean,
				required: true,
			}
		},
		data() {
			return {
				shibie: '',
				fileList: [],
				checkNick: false,
				formItemLayout,
				formTailLayout,
				form: this.$form.createForm(this),
				loading: false,
				imageUrl: '',
				formData: {},
				aliOssConfig: aliOssConfig,
				id: 0,
				updateflag: false,
				typeList: [],
				selmedicine: '',

				// 西药列表
				cvisible: false,
				pagination: {
					current: 1, //默认当前叶数
					total: 0, // 数据总数 如果不设置就以绑定的数据量为准
					pageSize: 10, // 默认每页条数
					showSizeChanger: true, //是否可以改变 pageSize
					pageSizeOptions: ['10', '20', '40', '80', '100'], //可切换每叶数据条数
					showTotal: total => this.$t('共') + ' ' + `${total}` + ' ' + this.$t('条数据'), // 分页中显示总的数据
					hideOnSinglePage: false // 只有一页时是否隐藏分页器 true为不显示 false为显示
				},
				queryParam: {
					name: '',
					drugtypeid: ''
				},
				searchflag: false,
				dataSource: [],
				columns: [{
						title: 'id',
						dataIndex: 'id',
						key: 'id',
						width: 100,
					},
					{
						title: '图片',
						key: 'image',
						dataIndex: 'image',
						// width: 200,
						scopedSlots: {
							customRender: 'image'
						}
					},
					{
						title: '名称',
						dataIndex: 'name',
						key: 'name',
						ellipsis: true,
						width: 150,
					},
					{
						title: '分类',
						dataIndex: 'drugtypeid',
						key: 'drugtypeid',
						ellipsis: true,
						width: 150
					},
					{
						title: '厂家',
						dataIndex: 'changjia',
						key: 'changjia',
						ellipsis: true,
						width: 150
					},
					{
						title: '规格',
						dataIndex: 'guige',
						key: 'guige',
						ellipsis: true,
						width: 150
					},
					{
						title: '处方药',
						dataIndex: 'chufangyao',
						key: 'chufangyao',
						ellipsis: true,
						width: 150
					},
					{
						title: '适应症',
						dataIndex: 'indications',
						key: 'indications',
						ellipsis: true,
						width: 150
					},
					{
						title: '用法',
						dataIndex: 'yongfa',
						key: 'yongfa',
						ellipsis: true,
						width: 150
					},
					{
						title: '成分',
						dataIndex: 'chengfen',
						key: 'chengfen',
						ellipsis: true,
						width: 150
					},
					{
						title: '性状',
						dataIndex: 'xingzhuan',
						key: 'xingzhuan',
						ellipsis: true,
						width: 150
					},
					{
						title: '剂型',
						dataIndex: 'jixing',
						key: 'jixing',
						ellipsis: true,
						width: 150
					},
					{
						title: '不良反应',
						dataIndex: 'blfy',
						key: 'blfy',
						ellipsis: true,
						width: 150
					},

					{
						title: '禁忌',
						dataIndex: 'jinji',
						key: 'jinji',
						ellipsis: true,
						width: 150
					},
					{
						title: '注意事项',
						dataIndex: 'zhuyi',
						key: 'zhuyi',
						ellipsis: true,
						width: 150
					},
					{
						title: '药物相互作用',
						dataIndex: 'ywhxzy',
						key: 'ywhxzy',
						ellipsis: true,
						width: 150
					},
					{
						title: '毒性',
						dataIndex: 'duxing',
						key: 'duxing',
						ellipsis: true,
						width: 150
					},
					{
						title: '供货价',
						dataIndex: 'supplyprice',
						key: 'supplyprice',
						ellipsis: true,
						fixed: 'right',
						width: 90,
						scopedSlots: {
							customRender: 'supplyprice'
						}
					},
					{
						title: '库存',
						dataIndex: 'inventory',
						key: 'inventory',
						ellipsis: true,
						fixed: 'right',
						width: 90,
						scopedSlots: {
							customRender: 'inventory'
						}
					},
					{
						title: '操作',
						key: 'operation',
						fixed: 'right',
						width: 100,
						scopedSlots: {
							customRender: 'action'
						}
					}
				],
			};
		},
		created() {
			this.getType()
			this.getMedicineList()
		},
		methods: {
			chooseInfo(val) {
				this.selmedicine = val
				this.cvisible = false
				let values = this.form.getFieldsValue();
				values.medicineid = val.id
				this.form.setFieldsValue(values);
			},
			getType() {
				medicineType().then(res => {
					this.typeList = res.data
				})
			},
			previewImg(img) {
				this.$refs.preimg.initData(img)
			},
			//选择西药
			chooseMedicine() {
				this.cvisible = true
				this.getMedicineList()
			},
			handleSearch() {
				this.pagination.current = 1
				this.searchflag = true
				this.getMedicineList()
			},
			resetSearch() {
				this.pagination.current = 1
				this.searchflag = false
				this.queryParam = {
					name: '',
					drugtypeid: ''
				}
				this.getMedicineList()
			},
			tablePaginationChange(e) {
				this.pagination = e
				this.getList()
			},
			getMedicineList() {
				let data = {
					pageNo: this.pagination.current,
					pageSize: this.pagination.pageSize,
				}
				if (this.searchflag) {
					data = {
						pageNo: this.pagination.current,
						pageSize: this.pagination.pageSize,
						...this.queryParam
					}
				}
				medicineWesAll(data).then(res => {
					this.pagination.total = res.data.totalCount
					this.dataSource = res.data.data
				})
			},
			cancelAdd() {
				this.visible = false
				// this.form.resetFields()
				// this.updateflag = false
				this.$emit('cancel', true)
				this.$emit('addCancel')
			},
			setUpdate(formValue) {
				let data = {
					medicineid: formValue.medicineid,
					inventory: formValue.inventory,
					supplyprice: formValue.supplyprice,
				}
				this.selmedicine = {
					name: formValue.name
				}
				var that = this
				that.form.setFieldsValue({
					...data
				})
				this.id = formValue.id
				this.updateflag = true
			},
			submit() {
				var that = this
				const {
					form: {
						validateFields
					},
				} = this

				validateFields((errors, values) => {
					if (!errors) {
						values.medicineid = parseInt(values.medicineid)
						values.pharmacyid = parseInt(this.$store.getters.id)
						values.inventory = parseInt(values.inventory)
						values.supplyprice = parseFloat(values.supplyprice)
						if (this.updateflag) {
							values.id = this.id
							medicineWesUpdate({
								...values,
							}).then((res) => {
								if (res.code == 0) {
									that.form.resetFields()
									that.$emit('ok')
								}
							})
						} else {
							medicineWesAdd({
								...values,
							}).then((res) => {
								if (res.code == 0) {
									that.form.resetFields()
									that.$emit('ok')
								}
							})
						}
					}
				})
			},
		},
	};
</script>
<style scoped>
	.banner-img {
		width: 40px;
		height: 40px;
		border-radius: 5px;
		cursor: pointer;
	}
</style>